<template>
	<div class="login-box safe-area-inset-top safe-area-inset-bottom">
		<div class="login-logo">
			<img src="https://via.placeholder.com/200x64" alt="" />
		</div>
		<div class="login-box">
			<van-form>
				<div class="login-box-wrapper">
					<van-field
						name="用户名"
						label="用户名"
						placeholder="请输入用户名"
						autocomplete="off"
						:rules="[{ required: true, message: '请填写用户名' }]"
					/>
					<van-field
						type="password"
						name="密码"
						label="密码"
						placeholder="请输入密码"
						autocomplete="new-password"
						:rules="[{ required: true, message: '请填写密码' }]"
						v-if="!msgLogin"
					/>
					<div class="msg-login" v-else>
						<van-field
							label="短信验证码"
							placeholder="请输入短信验证码"
						>
							<template #button>
								<van-button size="small" type="danger"
									>发送验证码</van-button
								>
							</template>
						</van-field>
					</div>
				</div>
				<div style="margin: 16px">
					<van-button round block type="danger" native-type="submit"
						>提交</van-button
					>
				</div>
			</van-form>
			<div class="login-actions">
				<div @click="register = true">
					<i class="ri-user-add-line"></i>
					<span>注册账号</span>
				</div>
				<div @click="msgLogin = !msgLogin">
					<i :class="msgLogin ? 'ri-lock-line' : 'ri-mail-line'"></i>
					<span>{{ msgLogin ? "密码登陆" : "短信登陆" }}</span>
				</div>
			</div>
		</div>
	</div>

	<van-popup
		v-model:show="register"
		position="bottom"
		closeable
		:style="{ height: '100vh' }"
	>
		<div class="register">
			<van-form>
				<div class="login-box-wrapper">
					<van-field
						label="用户名"
						placeholder="请输入用户名"
						autocomplete="off"
						:rules="[{ required: true, message: '请填写用户名' }]"
					/>
					<van-field
						type="password"
						label="密码"
						placeholder="请输入密码"
						autocomplete="new-password"
						:rules="[{ required: true, message: '请填写密码' }]"
					/>
					<van-field
						type="password"
						label="验证密码"
						placeholder="请再输入一次密码"
						autocomplete="new-password"
						:rules="[{ required: true, message: '两次密码不同' }]"
					/>
				</div>
				<div style="margin: 16px">
					<van-button round block type="danger" native-type="submit"
						>立即注册</van-button
					>
				</div>
			</van-form>
		</div>
	</van-popup>
</template>

<script>
import { ref } from "vue";
export default {
	setup() {
		const register = ref(false);
		const msgLogin = ref(false);
		return {
			register,
			msgLogin,
		};
	},
};
</script>

<style lang="less" scoped>
.login-box {
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.login-logo {
	margin: 70px 0 40px;
}
.login-box-wrapper {
	width: 80vw;

	.van-cell {
		background: none;
		flex-direction: column;
		&::after {
			content: none;
		}
	}
	&:deep(.van-field__label) {
		color: white;
		width: 100%;
	}
	&:deep(.van-field__control) {
		background: none !important;
		color: white;
		height: 48px;
		font-size: 16px;
		box-shadow: 0 0 1000px #1e1f35;
		&::placeholder {
			color: fade(white, 35%);
		}
		&:-internal-autofill-selected {
			background: none !important;
		}
	}
	&:deep(.van-button--small) {
		font-size: 12px;
	}
}
.login-actions {
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 50vw;

	> div {
		color: white;
		display: inline-flex;
		flex-direction: column;
		align-items: center;

		i {
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 16px;
			background: fade(#ff3399, 15%);
			color: #ff3399;
			border-radius: 50%;
			margin-bottom: 4px;
		}

		span {
			font-size: 12px;
			opacity: 0.65;
		}
	}
}

.register {
	background: #1e1f35;
	padding: 40px;
	padding-top: 56px;
	height: 100vh;
}
</style>
